<template>
  <div :style="{ ...border }" class="fund-video p-r" @click="handlePausePlay" @mousedown="onMouseDown">
    <div>
      <video
        id="video"
        ref="video"
        width="100%"
        height="100%"
        :poster="$staticRes(config.imgSrc)"
        :src="$staticRes(config.videoUrl)"
        preload="auto"
      >
        <!-- <source :src="$staticRes(config.videoUrl)" type="video/mp4" /> -->
      </video>
      <i v-if="isPaused" class="icon-play"></i>
    </div>
  </div>
</template>

<script>
  import borderMixin from '@/mixins/borderMixin';

  export default {
    mixins: [borderMixin],
    props: {
      widget: {
        type: Object,
        default: () => ({})
      }
    },

    data() {
      return {
        isPaused: true,
        isMove: false
      };
    },

    computed: {
      config() {
        return this.widget.config;
      },
      style() {
        return this.widget.style;
      }
    },

    methods: {
      onMouseDown() {
        document.onmousemove = () => {
          this.isMove = true;
        };
        document.onmouseup = () => {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      },

      handlePausePlay() {
        if (this.isMove) {
          this.isMove = false;
          return;
        }
        if (!this.config.videoUrl) {
          this.$message.warning('请先添加视频文件');
          return;
        }
        if (this.isPaused) {
          this.$refs.video.play();
          this.isPaused = false;
        } else {
          this.$refs.video.pause();
          this.isPaused = true;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .fund-video {
    overflow: hidden;
    border-radius: 10px;
    background-color: #000;

    .icon-play {
      @include bg('icons/icon-play.png');
      position: absolute;
      top: 50%;
      left: 50%;
      width: 64px;
      height: 64px;
      transform: translate(-50%, -50%);
    }
  }
</style>
